<template>
    <div class="body">

        <div class="ser_div">
            <el-row>
                <el-col>
                    <el-row style="display: flex; align-items: center">
                        <el-col :span="8" style="text-align: center"> 名称 </el-col>
                        <el-col :span="16">
                            <el-input v-model="ser.name"></el-input>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col>
                    <!-- <el-button @click="set_wuliao" class="add_btn">新增半成品</el-button> -->
                    <el-button @click="search()" class="add_btn" icon="el-icon-search">查询</el-button>
                    <el-button @click="searchreset" icon="el-icon-refresh" class="add_btn">重置</el-button>
                </el-col>
            </el-row>
        </div>


        <el-table :data="datalist" v-loading="loading" border>
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="name" label="半成品名字">
            </el-table-column>
            <el-table-column prop="stock" label="半成品库存">
            </el-table-column>
            <el-table-column prop="interlayer_name" label="半成品领料记录">
                <template slot-scope="scope">
                    <span style="cursor: pointer; color: cadetblue; padding-left: 5px" @click="mingxi_gets(scope.row,1)">详情</span>
                </template>
            </el-table-column>
            <el-table-column prop="backing_name" label="库存操作记录">
                <template slot-scope="scope">
                    <span style="cursor: pointer; color: cadetblue; padding-left: 5px" @click="mingxi_gets(scope.row,2)">详情</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="260" fixed="right">
                <template slot-scope="scope">
                    <el-button @click="set_wuliao(scope.row)" type="text" icon="el-icon-edit">库存操作</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                @prev-click="prev" @next-click="next" :current-page.sync="pagination.page"
                :page-size="pagination.per_page" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="title" :visible.sync="isProduct" width="60%" :close-on-click-modal="false"
            @close="close_dialogs">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                <div class="ulss">
                    <div class="lis">
                        <el-form-item label="类型">
                            <el-radio-group v-model="ruleForm.type">
                                <el-radio :label="1">添加</el-radio>
                                <el-radio :label="2">扣减</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="数量" prop="stock">
                            <el-input v-model="ruleForm.stock" type="number" @input="changeValue"></el-input>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="备注">
                            <el-input v-model="ruleForm.remark" type="textarea"
                                :autosize="{ minRows: 4, maxRows: 10 }"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close_dialog">取 消</el-button>
                <el-button type="primary" @click="add_ruleForm('ruleForm')">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="isdingdan" v-if="isdingdan" width="65%" :close-on-click-modal="false">
            <el-table :data="dingdanlist" stripe style="width: 100%" border v-if="modelType==1">
                <el-table-column prop="self_product_id" label="ID" width="180">
                </el-table-column>
                <el-table-column prop="self_product_name" label="半成品名字" width="180">
                </el-table-column>
                <el-table-column prop="stock" label="材料" min-width="220">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.child">
                            名称：{{ item.material.name }} 数量：{{ item.num }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="after_num" label="半成品量" width="180">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.after_num" @blur="blurInput(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="loss_num" label="损耗" w idth="180">
                </el-table-column>
            </el-table>
            <el-table :data="dingdanlist" stripe style="width: 100%" border v-if="modelType==2">
                <el-table-column prop="self_product_id" label="ID" width="180">
                </el-table-column>
                <el-table-column prop="self_product_name" label="半成品名字" width="180">
                </el-table-column>
                <el-table-column prop="type" label="类型" width="180">
                </el-table-column>
                <el-table-column prop="stock" label="库存" width="180">
                </el-table-column>
                <el-table-column prop="user_name" label="操作人" w idth="180">
                </el-table-column>
                <el-table-column prop="created_at" label="操作时间" w idth="180">
                </el-table-column>
                <el-table-column prop="remark" label="备注" w idth="180">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="modelhandleSizeChange" @current-change="modelhandleCurrentChange"
                    background @prev-click="modelprev" @next-click="modelnext" :current-page.sync="mode.page"
                    :page-size="mode.per_page" layout="total, prev, pager, next" :total="modelTotal">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closemodel">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    operateSelfProductStock,
    getSelfProductList,
    getWarehouseOrderList,
    selfProductStockLog,
    selfProductNumber
} from "@/api/product/index";
export default {
    data() {
        return {
            mode:{
                page:1,
                per_page:10
            },
            isdingdan: false,
            modelTotal:0,
            modelType:1,
            nowRow: {},
            ser: {
                name: ''
            },
            datalist: [],
            loading: true,
            title: "",
            isProduct: false,
            pagination: {
                per_page: 100,
                page: 1,
            },
            total: 0,
            ruleForm: {
                self_product_id: "",
                stock: "",
                remark: "",
                type: 1
            },
            rules: {
                stock: [{ required: true, message: "请输入数量", trigger: "blur" }]
            },
            dingdanlist: [],
            MaterialList: [],
        };
    },
    mounted() {
        this.getlist();
    },
    methods: {
        blurInput(val){
            console.log(val)
            selfProductNumber({id:val.id,after_num:val.after_num}).then(res=>{
                if(res.code===200){
                    this.$message({
                        type: "success",
                        message: "修改成功",
                    });
                }else{
                    this.$message({
                        type: "error",
                        message: res.msg,
                    });  
                }
            })
        },
        search() {
            this.getlist();
        },
        searchreset() {
            this.ser = {
                name: ''
            }
            this.getlist();

        },
        changeValue(e) {
            this.$forceUpdate()
        },
        del_wuliao(row) {
            delMaterial({ id: row.id, is_del: 1 }).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功",
                    });
                    this.getlist();
                } else {
                    this.$message({
                        type: "error",
                        message: res.msg,
                    });
                }
            });
        },
        close_dialogs() {
            this.ruleForm = {
                self_product_id: "",
                stock: "",
                remark: "",
                type: 1
            };
        },
        close_dialog() {
            this.isProduct = false;
        },
        add_ruleForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    operateSelfProductStock(this.ruleForm).then((res) => {
                        if (res.code == 200) {
                            this.isProduct = false;
                            this.$message.success("提交成功");
                            this.getlist();
                            this.close_dialogs()
                        }else{
                            this.$message.error("提交失败")
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        set_wuliao(row) {
            console.log(row);
            this.ruleForm.self_product_id = row.id;
            this.title = "库存操作";
            this.isProduct = true;
        },
        getlist() {
            getSelfProductList({ ...this.pagination, ...this.ser }).then((res) => {
                if (res.code == 200) {
                    this.datalist = res.data.data;
                    this.total = res.data.total;
                    this.loading = false;
                }
            });
        },
        handleSizeChange(val) {
            console.log(val);
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pagination.page = val;
            this.getlist();
        },
        prev() {
            this.pagination.page = this.pagination.page - 1;
            this.getlist();
        },
        next() {
            console.log("ss");
            this.pagination.page = this.pagination.page + 1;
            this.getlist();
        },
        closemodel(){
            this.isdingdan = false
            this.mode={
                page:1,
                per_page:10
            }
        },
        modelprev() {
            this.model.page = this.model.page - 1;
            this.mingxi_gets(this.nowRow,this.modelType);
        },
        modelnext() {
            console.log("ss");
            this.model.page = this.modelmodel.page + 1;
            this.mingxi_gets(this.nowRow,this.modelType);
        },
        modelhandleSizeChange(val) {
            console.log(val);
            console.log(`每页 ${val} 条`);
        },
        modelhandleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.model.page = val;
            this.mingxi_gets(this.nowRow,this.modelType);
        },
        mingxi_gets(val,type) {
            this.isdingdan = true
            this.nowRow = val
            this.modelType = type
            if(type==1){
                this.title="半成品领料记录"
                getWarehouseOrderList({ self_product_id: val.id,type:3, ...this.mode }).then(res => {
                    if (res.code == 200) {
                        this.dingdanlist = res.data.data
                        this.modelTotal = res.data.total
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg,
                        });
                    }
                })
            }else{
                this.title="库存操作记录"
                selfProductStockLog({ self_product_id: val.id, ...this.mode }).then(res => {
                    if (res.code == 200) {
                        this.dingdanlist = res.data.data
                        this.modelTotal = res.data.total
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg,
                        });
                    }
                })
            }
        },
    },
};
</script>

<style scoped>
.ulss {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* .el-form-item {
      margin-bottom: 0;
    } */
</style>